<template>
    <div class="dialog">
      <el-dialog
        title="报表详情信息"
        :visible.sync="showDialog"
        width="55%"
        top="0"
        :close-on-click-modal="false"
        @close="cancel"
      >
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="设备信息" name="first" />
          <el-tab-pane label="任务信息" name="second" />
          <el-tab-pane label="检查信息" name="third" />
        </el-tabs>
        <el-form
          v-if="activeName==='first'"
          ref="ruleForm"
          label-position="left"
          :model="formData"
          class="el-form"
        >
          <el-form-item 
          label="设备名称：" 
          prop="equipmentName" class="w50p">
            <el-input
              v-model="formData.equipmentName"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item
            label="设备编号："
            prop="equModelCode"
            class="w50p"
          >
            <el-input
              v-model="formData.equipmentCode"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item
            label="设备生产时间："
            prop="generationTime"
            class="w50p"
          >
            <el-input
              v-model="formData.generationTime"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item
            label="设备状态"
            prop="checkResult"
            class="w50p"
          >
            <el-input
              v-model="formData.checkResult"
              :disabled="true"
            />
          </el-form-item>
        </el-form>
        <el-form
          v-if="activeName==='second'"
          ref="ruleForm1"
          label-position="left"
          :model="formData"
          class="el-form"
        >
          <el-form-item label="点检计划：" prop="planName" class="w50p">
            <el-input
              v-model="formData.planName"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="执行人：" class="w50p" prop="staffName">
            <el-input
              v-model="formData.staffName"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="点检任务：" prop="taskName" class="w50p">
            <el-input
              v-model="formData.taskName"
              :disabled="!editStatus"
            />
          </el-form-item>
          <el-form-item label="任务编号：" prop="taskCode" class="w50p">
            <el-input
              v-model="formData.taskCode"
              :disabled="!editStatus"
            />
          </el-form-item>
          <el-form-item label="任务是否逾期：" prop="overdue" class="w50p">
            <el-input
              v-model="formData.overdue"
              :disabled="!editStatus"
            />
          </el-form-item>
          <el-form-item label="任务状态：" prop="status" class="w50p">
            <el-input
              v-model="formData.status"
              :disabled="!editStatus"
            />
          </el-form-item>
        </el-form>
          <el-form
            v-if="activeName==='third'"
            ref="ruleForm2"
            label-position="left"
            :model="formData"
            class="el-form"
          >
            <el-form-item label="检查项：" prop="checkItemName" class="w50p">
              <el-input
                v-model="formData.checkItemName"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="检查方法：" prop="accessMethod" class="w50p">
              <el-input
                v-model="formData.accessMethod"
                :disabled="!editStatus"
              />
            </el-form-item>
            <el-form-item label="检查内容：" prop="checkItemContent" class="w50p">
              <el-input
                v-model="formData.checkItemContent" 
                :disabled="!editStatus"
              />
            </el-form-item>
            <el-form-item label="检查时间：" class="w50p" prop="checkTime">
              <el-input
                v-model="formData.checkTime" 
                :disabled="!editStatus"
              />
            </el-form-item>
            <el-form-item label="标准值：" prop="standardValue" class="w50p">
              <el-input
                v-model="formData.standardValue"
                :disabled="!editStatus"
              />
            </el-form-item>
            <el-form-item label="判断结果：" prop="judgeResult" class="w50p">
              <el-input
                v-model="formData.judgeResult"
                :disabled="!editStatus"
              />
            </el-form-item>
          </el-form>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        </div> -->
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    name: '',
    components: { },
    props: {
      nowChanceStau: {
        type: String,
        default: ""
      },
      show: {
        type: Boolean,
        default: false
      },
      editObject: {
        type: [Object],
        default: () => {
          return {}
        }
      },
      equModelArr: {
        type: [Array],
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        //是否处于编辑状态
        editStatus:false,
        // 选中的tab页
        activeName: 'first',
        formData: {},
        showDialog: this.show,
        statusArr: [{
          name: '启用', id: 'ENABLE'
        }, {
          name: '废弃', id: 'DISCARD'
        }, {
          name: '维修中', id: 'REPAIRING'
        }, {
          name: '禁用', id: 'DISABLE'
        }]
      };
    },
    computed: {
      // ...mapGetters({
      //   judgePermission: "permission/judgePermission"
      // })
    },
    watch: {
      show(v) {
        this.showDialog = v;
      },
      editObject(v) {
        if (v && v.equipmentCode) {
          this.formData = this.editObject
        }
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      save() {
        if (this.activeName === 'first') {
          this.saveInfo('ruleForm')
        }
        if (this.activeName === 'second') {
          this.savePurchase('ruleForm1')
        }
        if (this.activeName === 'third') {
          this.saveScrap('ruleForm2')
        }
        this.editStatus = false
      },
      close() {
        this.$emit("closeDialog");
      },
      cancel() {
        this.$emit("cancelDialog");
        this.editStatus = false
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .add-many {
    border: 1px solid #6ecae3;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: transparent;
    line-height: 40px;
    border-radius: 4px;
    color: rgb(161, 154, 154);
    font-weight: 600;
    i {
      font-size: 40px;
    }
  }
  .pointer{
    cursor: pointer;
  }
  ::v-deep .el-upload-dragger{
    width: 330px;
  }
  .video-con{
    width: 100%;
    height: 200px;
  }
  ::v-deep .el-dialog__wrapper .el-dialog .el-dialog__body .el-form .el-form-item .el-form-item__label{
    min-width:160px !important;
  }
  ::v-deep .el-tabs__item.is-active{
    color: #006e91;
  }
  ::v-deep .el-image-viewer__close{
    color: #006e91;
  }
  ::v-deep .el-tabs__item{
    font-size: 16px;
    &:hover{
      color:#006e91;
    }
  }
  ::v-deep .el-tabs__active-bar{
    background-color: #006e91;
  }

  ::v-deep .el-dialog__body{
    padding-top:15px;
  }
  </style>
  